<template>
    <div>
        <CategorySelect :formInline="formInline" :getData="getPageData" :scencee="scencee" />
        <el-card style="margin-top: 5px;">
            <div v-show="scene === spuConstant.scene_zero">
                <el-button icon="plus" type="primary" :disabled="!formInline.category3"
                    @click="addSpu">添加SPU</el-button>
                <el-button type="danger" icon="delete" @click="deleteSpuBatch">删除</el-button>
                <el-table border stripe :data="tableData" class="table-main" ref="tableRef"
                    @selection-change="handleSelectionChange">
                    <el-table-column align="center" type="selection" width="55" />
                    <el-table-column align="center" label="序号" width="80" type="index" />
                    <el-table-column align="center" prop="spuName" label="SPU名称" width="200" />
                    <el-table-column align="center" prop="description" show-overflow-tooltip label="SPU描述" />
                    <el-table-column align="center" label="操作" width="260">
                        <template #default="{ row }">
                            <el-button type="primary" icon="plus" title="添加SKU" @click="addSku(row.id, row.tmId)" />
                            <el-button type="primary" icon="edit" title="编辑SPU" @click="editSpu(row)" />
                            <el-button type="primary" icon="view" title="查看SKU列表" @click="findSkuList(row.id)" />
                            <el-button type="danger" icon="delete" title="删除SPU" @click="deleteSpu(row.id)" />
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 30, 40]" layout="prev, pager, next, jumper, ->, sizes, total"
                    :total="total" @change="getPageData" />
            </div>
            <SpuFrom ref="spuFromRef" :category3="formInline.category3" :getPageData="getPageData"
                v-show="scene === spuConstant.scene_one" @updateSpuScene="updateSpuScene" />
            <SkuFrom ref="skuFromRef" v-show="scene === spuConstant.scene_two" @updateSpuScene="updateSpuScene"
                :formInline="formInline" />
            <el-dialog title="SKU列表" v-model="showDialog">
                <el-table border stripe :data="skuList" max-height="600">
                    <el-table-column align="center" prop="skuName" label="SKU名称" />
                    <el-table-column align="center" prop="price" label="价格" />
                    <el-table-column align="center" prop="weight" label="重量" />
                    <el-table-column align="center" label="图片" width="180">
                        <template #default="{ row }">
                            <img :src="row.skuDefaultImg" style="width: 150px" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>

    </div>
</template>

<script setup lang='ts' name="SPU">
import spuConstant from './spuConstant';
import { reqHasSpu, reqDeleteSpuInfo, reqFindSkuList } from '@/api/product/spu'
import type { SkuType, SpuType } from '@/api/product/spu/type'
import SpuFrom from './spuForm.vue';
import SkuFrom from './skuForm.vue';
import type { ResponseData } from '@/api/type';
import { ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus/es/components/message-box';

let formInline = reactive({
    category1: undefined,
    category2: undefined,
    category3: undefined,
})
let scencee = ref<Boolean>(true)
let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
let tableData = ref<SpuType[]>()
let scene = ref<number>(spuConstant.scene_zero)
const spuFromRef = ref()
const skuFromRef = ref()
let selectIds = ref<number[]>([]);
let showDialog = ref<boolean>(false)
let skuList = ref<SkuType[]>([])

function getPageData() {
    if (!formInline.category3) {
        ElMessage.error('请选择三级分类')
        return
    }
    reqHasSpu(currentPage.value, pageSize.value, formInline.category3).then(res => {
        tableData.value = res.data.records
        total.value = res.data.total
    }).catch((error: ResponseData<String>) => {
        ElMessage.error(error.message);
    })
}

const addSpu = () => {
    scene.value = spuConstant.scene_one
    scencee.value = false
}

// 自定义事件通信 子传父
const updateSpuScene = (newScene: number) => {
    console.log("🚀 ~ updateSpuScene ~ newScene:", newScene)
    scene.value = newScene
    if (newScene === spuConstant.scene_zero) {
        scencee.value = true
    }
}

const editSpu = (row: SpuType) => {
    addSpu()
    spuFromRef.value.getData(row)
}

const deleteSpu = (id: number) => {
    ElMessageBox.confirm('此操作将永久删除该SPU, 是否继续?').then(() => {
        reqDeleteSpuInfo(id).then(() => {
            ElMessage.success('删除成功')
            getPageData()
        }).catch((error: ResponseData<String>) => {
            ElMessage.error(error.message);
        })
    }).catch((action: Action) => {
        console.log("🚀 ~ deleteSpu ~ action:", action)
    })
}

const handleSelectionChange = (newSelection: SpuType[]) => {
    const validIds = newSelection
        .map(item => item.id)
        .filter(id => id !== undefined) as number[];
    selectIds.value = validIds
}

const deleteSpuBatch = () => {
    ElMessageBox.confirm('此操作将永久删除所选SPU, 是否继续?').then(() => {
        ElMessage.success(`删除成功.[${selectIds.value.join(',')}]`)
        getPageData()
    }).catch((action: Action) => {
        console.log("🚀 ~ deleteSpuBatch ~ action:", action)
    })
}

const addSku = (spuId: number, tmId: number) => {
    skuFromRef.value.getData(spuId, tmId)
    scene.value = spuConstant.scene_two
    scencee.value = false
}


const findSkuList = (spuId: number) => {
    reqFindSkuList(spuId).then(res => {
        skuList.value = res.data
        showDialog.value = true
    }).catch((error: ResponseData<String>) => {
        ElMessage.error(error.message);
    })
}
</script>

<style scoped lang="scss">
.table-main {
    height: calc(100vh - $base-tabbar-height - var(--card-height) - 180px);
    margin: 10px 0px;
}
</style>